<template>
  <a-modal
    :maskClosable="maskClosable"
    title="IT设备详情"
    :width="600"
    :visible="visible"
    :confirm-loading="confirmLoading"
    :okButtonProps="{ class: { 'jee-hidden': true } }"
    @cancel="handleCancel"
    cancelText="关闭"
  >
    <a-spin :spinning="confirmLoading">
      <a-form :form="form" :labelCol="labelCol" :wrapperCol="wrapperCol">
        <a-form-item
          label="设备类型"
        >
          <span class="ant-form-text"> {{ model.typeCnName }} </span>
        </a-form-item>
        <a-form-item
          label="数据中心"
        >
          <span class="ant-form-text"> {{ model.datacenterName }} </span>
        </a-form-item>
        <a-form-item
          label="机柜"
        >
          <span class="ant-form-text"> {{ cabinetName }} </span>
        </a-form-item>
        <a-form-item
          label="设备名称"
        >
          <span class="ant-form-text"> {{ model.name }} </span>
        </a-form-item>
        <a-form-item
          label="设备识别号"
        >
          <span class="ant-form-text"> {{ model.esn }} </span>
        </a-form-item>
        <a-form-item
          label="设备型号"
        >
          <span class="ant-form-text"> {{ model.deviceModel }} </span>
        </a-form-item>
        <a-form-item
          label="设备厂商"
        >
          <span class="ant-form-text"> {{ model.deviceManufacturer }} </span>
        </a-form-item>
        <div v-if="type === 'node'">
          <a-form-item
            label="管理网IP"
          >
            <span class="ant-form-text"> {{ model.mgmIp }} </span>
          </a-form-item>
          <a-form-item
            label="带外管理IP"
          >
            <span class="ant-form-text"> {{ model.ipmiIp }} </span>
          </a-form-item>
          <a-form-item
            label="带外管理用户"
          >
            <span class="ant-form-text"> {{ model.ipmiUser }} </span>
          </a-form-item>
          <a-form-item
            v-if="visible"
            label="带外管理密码"
          >
            <a-input-password
              autocomplete="new-password"
              read-only
              v-decorator="[
                'node.ipmiPassword',
                {
                  initialValue: this.model.ipmiPassword,
                },
              ]"
            />
          </a-form-item>

          <a-form-item
            label="主机名"
          >
            <span class="ant-form-text"> {{ model.hostname }} </span>
          </a-form-item>
          <a-form-item
            label="额定电压"
          >
            <span class="ant-form-text">
              {{
                model.ratedVoltageSm
                  ? parseFloat(node.ratedVoltageSm).toFixed(2) + " V"
                  : ""
              }}
            </span>
          </a-form-item>
          <a-form-item
            label="额定功率"
          >
            <span class="ant-form-text">
              {{
                model.ratedPowerSm
                  ? parseFloat(model.ratedPowerSm).toFixed(2) + " W"
                  : ""
              }}
            </span>
          </a-form-item>
        </div>
        <div v-if="type === 'switcher'">
          <a-form-item
            label="交换机IP"
          >
            <span class="ant-form-text"> {{ model.ip }} </span>
          </a-form-item>
          <a-form-item
            label="交换机Community"
          >
            <span class="ant-form-text"> {{ model.community }} </span>
          </a-form-item>
        </div>
        <a-form-item
          label="创建时间"
        >
          <span class="ant-form-text"> {{ model.createTime }} </span>
        </a-form-item>
      </a-form>
    </a-spin>
  </a-modal>
</template>
<script>
import { gPostAction } from "@/api/manage";
import { sm4Decrypt, randomString } from "@/utils/sm4";
import { sm3Hash } from "@/utils/sm3";
import { SM4_KEY } from "@/store/mutation-types";

export default {
  name: "DetailModal",
  data() {
    return {
      visible: false,
      confirmLoading: false,
      form: this.$form.createForm(this),
      model: {},
      cabinetName: undefined,
      type: "node",
      labelCol: {
        xs: { span: 24 },
        sm: { span: 6 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      url: {
        detailNode: "/asset/detailNode",
        detailSwitcher: "/asset/detailSwitcher",
      },
      maskClosable: false,
    };
  },
  methods: {
    loadDeviceDetail(cabinetId) {
      const requestData = {
        id: cabinetId,
        content: '基础设施详情'
      };
      gPostAction('/asset/detailDevice', requestData).then((res) => {
        if (res.data && res.data.name) {
          this.cabinetName = res.data.name
        } else {
          this.cabinetName = undefined
        }
      });
    },
    detail(record) {
      this.visible = true;
      this.cabinetName = undefined;
      this.$nextTick(() => {
        const data = {
          id: record.id,
          title:
            "精确管控与供电制冷联动-基础资源细粒度感知-资源管理-L2层：IT设备",
        };
        this.$ls.set(SM4_KEY, randomString());
        if (record.type === 6) {
          gPostAction(this.url.detailNode, data).then((res) => {
            this.model = Object.assign({}, res.data);
            if (this.model.cabinetId) {
              this.loadDeviceDetail(this.model.cabinetId);
            }
            if (this.model.smData) {
              let str = sm4Decrypt(this.model.smData);
              let len = str.length;
              let valStr = str.substring(0, len - 64);
              let sm3Str = str.substring(len - 64, len);
              let arr = valStr.split("|");
              if (arr && arr.length > 2) {
                this.model.ipmiPassword = arr[0];
                this.model.ratedPowerSm = arr[1];
                this.model.ratedVoltageSm = arr[2];
                if (
                  sm3Str &&
                  sm3Hash(arr[0] + "|" + arr[1] + "|" + arr[2]) !== sm3Str
                ) {
                  // this.$message.warning("数据完整性被破坏,请注意数据安全。");
                }
              }
            } else {
              // this.$message.warning("完整性被破坏,请注意数据安全。");
            }
          });
          this.type = "node";
        } else if (record.type === 7) {
          gPostAction(this.url.detailSwitcher, data).then((res) => {
            this.model = Object.assign({}, res.data);
            if (this.model.community) {
              let str = sm4Decrypt(this.model.community);
              let len = str.length;
              this.model.community = str.substring(0, len - 64);
              let sm3Str = str.substring(len - 64, len);
              if (
                this.model.community &&
                sm3Str &&
                sm3Hash(this.model.community) !== sm3Str
              ) {
                // this.$message.warning("数据完整性被破坏,请注意数据安全。");
              }
            } else {
              // this.$message.warning("完整性被破坏,请注意数据安全。");
            }
          });
          this.type = "switcher";
        }
      });
    },
    handleCancel(e) {
      this.visible = false;
    },
  },
};
</script>

<style lang="less" scoped>
/deep/ .ant-input-affix-wrapper .ant-input:not(:last-child) {
  border: 0;
}

/deep/ .ant-input-affix-wrapper:hover .ant-input:not(.ant-input-disabled) {
  border: 0;
}
</style>
